<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>文章详情</title>
    <link
            href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css"
            rel="stylesheet"
    />
    <style>
        #editor—wrapper {
            border: 1px solid #ccc;
            z-index: 100; /* 按需定义 */
        }

        #toolbar-container {
            border-bottom: 1px solid #ccc;
        }

        #editor-container {
            height: 500px;
        }
    </style>
</head>
<body>
<cms-layout layout="admin/layout/master">
    <div id="app">
        <el-form ref="form" :model="article" label-width="80px">
            <el-form-item label="标题">
                <el-input v-model="article.title"></el-input>
            </el-form-item>
            <el-form-item label="所属组">
                <el-select v-model="article.category_id" placeholder="请选择">
                    <el-option th:each="item : ${categories}"
                               th:key="${item.id}"
                               th:label="${item.nameTranslate.content}"
                               th:value="${item.id}"
                    >
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="内容">
                <div id="editor—wrapper">
                    <div id="toolbar-container"><!-- 工具栏 --></div>
                    <div id="editor-container"><!-- 编辑器 --></div>
                </div>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">保存</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>

    </div>
</cms-layout>
</body>
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
<script>

</script>
<script>
    let editor = null;
    let app = new Vue({
        el: '#app',
        data: function () {
            return {
                article: {
                    id: '[[${article.id}]]',
                    category_id: '[[${article.category != null?article.category.id:""}]]',
                    title: '[[${article.titleTranslate != null?article.titleTranslate.content:""}]]',
                    content: '',
                },
            }

        },
        created() {

        },
        mounted() {
            let that = this;
            const {createEditor, createToolbar} = window.wangEditor

            const editorConfig = {
                placeholder: '',
                onChange(editor) {
                    const html = editor.getHtml()
                },
            }

            editor = createEditor({
                selector: '#editor-container',
                html: '',
                config: editorConfig,
                mode: 'default', // or 'simple'
            })

            const toolbarConfig = {}

            const toolbar = createToolbar({
                editor,
                selector: '#toolbar-container',
                config: toolbarConfig,
                mode: 'default', // or 'simple'
            })

            var unescapedNodes = this.unescapeHtml('[[${article.contentTranslate != null?article.contentTranslate.content:""}]]');
            console.log('[[${test}]]')
            editor.setHtml(unescapedNodes)
        },
        methods: {
            unescapeHtml(html) {
                var unescapedHtml = $('<div>').html(html).text();
                return unescapedHtml;
            },
            onSubmit() {
                let that = this;
                //TODO 必填验证
                this.article.content = editor.getHtml();
                console.log(this.article);
                if (this.article.id > 0) {
                    axios.put('/admin/article/update/' + this.article.id, this.article).then(function (res) {
                        res = res.data;
                        that.$message({
                            type: 'success',
                            message: res.msg
                        });
                        if (res.code == 0) {
                            window.location.href = '/admin/article'
                        }
                    }).catch(function (err) {
                        that.$message({
                            type: 'error',
                            message: err.msg
                        });
                    }).finally(function () {

                    });
                } else {
                    axios.post('/admin/article/store', this.article).then(function (res) {
                        res = res.data;
                        that.$message({
                            type: 'success',
                            message: res.msg
                        });
                        if (res.code == 0) {
                            window.location.href = '/admin/article'
                        }

                    }).catch(function (err) {
                        that.$message({
                            type: 'error',
                            message: err.msg
                        });
                    }).finally(function () {

                    });
                }
            }
        },
    })
</script>

</html>